<template>
  <div class="aircraft-container">
    <header class="header">
      <h1>中国商用飞机发展历程</h1>
    </header>
    
    <TimelineSection />
  </div>
</template>

<script setup>
import TimelineSection from './components/TimelineSection.vue'
</script>

<style>
.aircraft-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #000B1F, #001F4D);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: #fff;
  overflow-x: hidden;
  position: relative;
}

.aircraft-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 50px 160px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 80px 120px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 110px 130px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 140px 80px, #fff, rgba(0,0,0,0));
  background-size: 200px 200px;
  opacity: 0.3;
  animation: sparkle 15s linear infinite;
}

@keyframes sparkle {
  0% { background-position: 0 0; }
  100% { background-position: 200px 200px; }
}

.header {
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 100%);
}

.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00B4FF, transparent);
}

h1 {
  font-size: 2.8rem;
  background: linear-gradient(90deg, #fff, #00FFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  .header {
    padding: 2rem 1rem;
  }
}
</style> 